<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			canvas {
				background: seagreen;
				margin: 0 auto;
				display: block;
			}
		</style>
	</head>

	<body>
		<canvas id="myCan" width="800" height="800">
			您的浏览器不支持canvas，请升级浏览器！
		</canvas>
		<div class="box"></div>
		<script>
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			ctx.translate(400,400);
			
			// 画 X 轴
			ctx.beginPath();
			ctx.strokeStyle = '#fff';
			ctx.moveTo(-400,0);
			ctx.lineTo(400,0);
			ctx.stroke();
			// 画 Y 轴
			ctx.beginPath();
			ctx.strokeStyle = '#fff';
			ctx.moveTo(0,-400);
			ctx.lineTo(0,400);
			ctx.stroke();
			// 填充文字
			// ctx.font = '80px 微软雅黑';
			// ctx.textAlign = 'center';
			// ctx.textBaseline = 'middle';
			// ctx.fillText('apple',0,0);
			
			// 描边文字
			ctx.font = '80px 微软雅黑';
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			// ctx.fillText('apple',0,0);
			ctx.strokeText('apple');
		</script>
	</body>

</html>

